<script lang="ts">
	import { user, type User } from '$lib/AniList/user';
	import HeadTitle from '$lib/Home/HeadTitle.svelte';
	import Message from '$lib/Loading/Message.svelte';
	import { estimatedDayReading } from '$lib/Media/Manga/time';
	import Skeleton from '$lib/Loading/Skeleton.svelte';
	import root from '$lib/Utility/root.js';
	import locale from '$stores/locale.js';
	import { onMount } from 'svelte';
	import authorisedUsers from '$lib/Data/authorised.json';
	import tooltip from '$lib/Tooltip/tooltip.js';
	import AnimeRateLimited from '$lib/Error/AnimeRateLimited.svelte';

	export let data;

	let userData: User | undefined = undefined;
	let error = false;

	$: displayBadges = (username: string, badges: number | string) =>
		$locale({
			values: {
				badges: badges,
				username
			}
		}).user.profile.badges;

	onMount(() => {
		user(data.username)
			.then((profile) => (userData = profile))
			.catch(() => (error = true));
	});

	// 8.5827814569536423841e0
</script>

<HeadTitle route={`${data.username}'s Profile`} path={`/user/${data.username}`} />

{#if error}
	<AnimeRateLimited>
		<a href={`https://anilist.co/user/${data.username}`} target="_blank">@{data.username}</a>'s
		profile could not be loaded.
	</AnimeRateLimited>
{:else}
	<div class={userData ? 'card card-small' : 'card'} id="user-panel">
		{#if userData === null}
			Could not load user profile for <a
				href={`https://anilist.co/user/${data.username}`}
				target="_blank">@{data.username}</a
			>.

			<p />

			Does this user exist?
		{:else if userData === undefined}
			<Message />

			<Skeleton card={false} count={1} height="224px" />
		{:else}
			<div
				class="card"
				id="user-grid"
				style={`background-image: ${
					userData ? `url(${userData.bannerImage})` : 'none'
				}; padding: 0;`}
			>
				{#if userData}
					<img src={userData.bannerImage} alt="" id="cover-image" />
				{/if}

				<div class="card" id="user-grid-content">
					<div id="user-grid-avatar">
						<a href={`https://anilist.co/user/${userData.name}`} target="_blank">
							<img src={userData.avatar.large} alt="" width="100vw" id="avatar" />
						</a>
					</div>

					<div id="user-grid-content-text">
						<p>
							<a
								href={`https://anilist.co/user/${userData.name}`}
								target="_blank"
								title={String(userData.id)}
								use:tooltip
							>
								@{userData.name}
							</a>
							{#if userData && authorisedUsers.includes(userData.id)}
								&#8204;
								<button class="unclickable-button button-badge badge-rainbow">Owner</button>
							{/if}
							<span class="click-item">•</span>
							<a href={root(`/user/${userData.name}/badges`)}>Badge Wall</a>
						</p>

						{$locale({
							values: {
								username: data.username,
								anime: (userData.statistics.anime.minutesWatched / 60 / 24).toFixed(1),
								manga: estimatedDayReading(userData.statistics.manga.chaptersRead).toFixed(1)
							}
						}).user.profile.statistics}

						<p />

						{#await fetch(root(`/api/badges?id=${userData.id}`))}
							{displayBadges(userData.name, '...')}
						{:then badges}
							{#await badges.json()}
								{displayBadges(userData.name, '...')}
							{:then badges}
								{displayBadges(userData.name, badges.length)}
							{:catch}
								{displayBadges(userData.name, '?')}
							{/await}
						{:catch}
							{displayBadges(userData.name, '?')}
						{/await}
					</div>
				</div>
			</div>
		{/if}
	</div>
{/if}

<style>
	#user-grid-content {
		display: flex;
		flex-wrap: wrap;
		column-gap: 1.5em;
		background-color: rgba(0, 0, 0, 0.468);
		color: #d8d8d8;
		border-top-left-radius: 0;
		border-top-right-radius: 0;
	}

	#user-grid-avatar {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	#avatar {
		border-radius: 8px;
	}

	.click-item {
		margin: 0 0.625rem;
	}

	#user-grid {
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}

	#cover-image {
		visibility: hidden;
		height: 4.5em;
	}
</style>
